<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生页面</title>
    <script src="/mvc/js/vue.min.js"></script>
    <script src="/mvc/js/axios.min.js"></script>
</head>
<body>

<div id="app">
    <a href="addStu.html"> 添加学生 </a>
    <table border="1" cellspacing="0">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>分数</td>
            <td>描述</td>
            <td> 操作 </td>
        </tr>
        <tr v-for="(stu,index) in stus">
            <td>{{stu.id}}</td>
            <td>{{stu.name}}</td>
            <td>{{stu.age}}</td>
            <td>{{stu.score}}</td>
            <td>{{stu.info}}</td>
            <td>
                <button @click="delStu(stu.id)">删除</button>
                &nbsp; &nbsp; &nbsp; &nbsp;
                <button @click="findStuById(stu.id)">编辑</button>
            </td>
        </tr>

    </table>
</div>

<script>


    let app = new Vue({
        el:"#app",
        data:{          // 数据
            stus:[]
        },
        methods:{       // 方法

            //通过id查询数据
            //页面跳转
            findStuById(id){

                //localStorage特性，这个特性主要是用来作为本地存储来使用的,可以实现页面是数据共享
                //内部有一个map 可以实现数据共享
                // setItem(key,value) 存储数据
                // getItem(key) 存储数据
                localStorage.setItem("id",id);
                //页面跳转
                location.href = "editstu.html";
            },

            // 删除 操作
            delStu(id){
               axios({
                   type:"GET",
                   url:"http://localhost:8080/mvc/delStu",
                   params:{
                       id:id
                   }
               }).then(resp=>{
                   // resp 回写对象的封装  回写的数据都是封装到 data这个属性中
                   if (resp.data.code == 100000) {
                       alert(resp.data.msg);
                       // 刷新的操作  重查询一次
                       this.findStu();
                   }
               });
            },

            // 查询学生
            // http://localhost:8080/mvc/queryStus
            findStu(){
                axios({
                    type:"GET",     // 请求方式 GET
                    url:"http://localhost:8080/mvc/queryStus"   // 请求的url
                }).then(resp=>{ //请求成功执行的函数
                    console.log(resp);
                    this.stus = resp.data;
                })
            }
        },
        created(){
            //初始化操作
            this.findStu();
        }
    })

</script>

</body>
</html>